<template>
	<view class="progress-container">
		<canvas canvas-id="halfCircleProgress" style="width: 200px; height: 100px;"></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			// 进度值(0-100)
			progress: {
				type: Number,
				default: 87,
				validator: (value) => value >= 0 && value <= 100
			},
			// 画布大小(直径)
			canvasSize: {
				type: Number,
				default: 200
			},
			// 圆环宽度
			strokeWidth: {
				type: Number,
				default: 15
			},
			// 背景圆环颜色
			bgColor: {
				type: String,
				default: '#e0e0e0'
			},
			// 进度圆环颜色
			progressColor: {
				type: String,
				default: '#3498db'
			}
		},
		data() {
			return {
				// 用于动画效果的当前进度
				progress: 50, // 进度值
			};
		},
		watch: {

		},
		onReady() {
			this.drawHalfCircleProgress();
		},
		methods: {
			drawHalfCircleProgress() {
				const ctx = uni.createCanvasContext('halfCircleProgress', this);
				const centerX = 100; // 圆心x坐标
				const centerY = 50; // 圆心y坐标
				const radius = 90; // 半径
				const startAngle = Math.PI * 1.5; // 起始角度（半圆从180度开始）
				const endAngle = Math.PI * 0.5; // 结束角度（半圆到0度结束）
				const lineWidth = 10; // 线条宽度

				// 绘制半圆背景
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
				ctx.setStrokeStyle('#eee');
				ctx.setLineWidth(lineWidth);
				ctx.stroke();
				ctx.closePath();

				// 绘制进度半圆
				const sweepAngle = (this.progress / 100) * Math.PI; // 计算进度对应的角度
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, startAngle, startAngle + sweepAngle, false);
				ctx.setStrokeStyle('#4caf50'); // 进度条颜色
				ctx.setLineWidth(lineWidth);
				ctx.stroke();
				ctx.closePath();

				// 绘制进度文本
				ctx.setFontSize(14);
				ctx.setFillStyle('#000');
				ctx.setTextAlign('center');
				ctx.fillText(`${this.progress}%`, centerX, centerY + 5);

				ctx.draw();
			},
			updateProgress(newProgress) {
				this.progress = newProgress;
				this.drawHalfCircleProgress();
			},
		}
	};
</script>

<style scoped>
	.progress-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.progress-canvas {
		/* 确保canvas在Retina屏幕上显示清晰 */
		transform: scale(1);
	}
</style>